<template>
    <a-layout>
        <a-layout-sider
            class="sideMenu"
            width="350"
            :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }"
        >
            <sideMenu class="sideMenuStyle"></sideMenu>
        </a-layout-sider>
        <a-layout :style="{ marginLeft: '350px' }">
            <a-layout-content>
                <router-view style="margin: 0 auto; width: 90%;text-align:left;margin-top:100px;"></router-view>

                <div>
                    <v-chart class="chart" :option="option" />
                </div>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>

<script>
import { defineComponent, ref } from "vue";
// 引入组件
import sideMenu from "../components/common/SideMenu.vue";

export default defineComponent({
    name: "Index",
    components: {
        sideMenu,
    },
    provide: {},
    setup() {
        const option = ref({
            title: {
                text: "Traffic Sources",
                left: "center",
            },
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            legend: {
                orient: "vertical",
                left: "left",
                data: [
                    "Direct",
                    "Email",
                    "Ad Networks",
                    "Video Ads",
                    "Search Engines",
                ],
            },
            series: [
                {
                    name: "Traffic Sources",
                    type: "pie",
                    radius: "55%",
                    center: ["50%", "60%"],
                    data: [
                        { value: 335, name: "Direct" },
                        { value: 310, name: "Email" },
                        { value: 234, name: "Ad Networks" },
                        { value: 135, name: "Video Ads" },
                        { value: 1548, name: "Search Engines" },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                        },
                    },
                },
            ],
        });

        return {
            option,
        };
    },
});
</script>

<style scoped>
.chart {
    height: 400px;
}
.sideMenu {
    background: #fff;
    text-align: left;
    /* height: 100vh; */
}
.sideMenu :deep(.ant-layout-sider-children) {
    margin-left: 60px;
    margin-top: 80px;
    margin-right: 60px;
    height: 0;
}
</style>
